<template>
  <div class="club">
    <Card>
      <template #title>
        <div class="club-image">
          <van-image height="100%" width="100%" :src="clubCover"/>
        </div>
      </template>
      <div class="club-content">
        <div class="club-content-title">
          <h3>
            {{clubName}}
          </h3>
        </div>
        <div class="club-content-desc">
          {{clubDesc}}
        </div>
        <div class="club-content-other">
          <div class="club-content-other-tag">
            <van-icon class-prefix="aliIconfont" name="icon-biaoqian" size="25px"/>
            <span>{{clubTag}}</span>
          </div>
          <div class="club-content-other-member">
            <p>共 <strong>{{clubMemberInfo.length}}</strong> 人</p>
            <ul>
              <li v-for="(item,index) in clubMemberInfo" :key="index" v-show="index < 3">
                <van-image width="100%" height="100%" :src="item.userImgUrl"></van-image>
              </li>
              <li v-if="clubMemberInfo.length != 0 && clubMemberInfo.length > 3">
                <van-icon class-prefix="aliIconfont" name="icon-gengduo" style="transform:rotate(90deg)" size="25px"/>
              </li>
              <li v-if="clubMemberInfo.length == 0">
                <van-image width="100%" height="100%" :src="require('@/assets/avatar.png')"/>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </Card>
  </div>
</template>
<script>
import Card from "@/components/Card.vue";
import { Image as VanImage,Icon } from "vant";
export default {
  props:['clubName','clubDesc','clubCover','clubTag','clubMemberInfo'],
  components:{
    [VanImage.name]:VanImage,
    [Icon.name]:Icon,
    Card
  }
}
</script>
<style lang="less">
  .club{
    margin-bottom: 8px;
    >.diy_card{
      >.diy_card_header{
        padding: 0;
      }
      >.diy_card_content{
        padding: 0;
      }
    }
    .club-image{
      width: 100%;
      height: 12.5rem;
    }
    .club-content{
      padding: 0 12px;
      padding-bottom: 12px;
      background: #fff;
      .club-content-title{
        padding: 4px 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        h3{
          padding: 0;
          margin:0;
        }
      }
      .club-content-desc{
        text-align: left
      }
      .club-content-other{
        display: flex;
        justify-content: space-between;
        padding-top: 8px;
        .club-content-other-member{
          display: flex;
          align-items: center;
          p{
            padding: 0;
            margin: 0 12px;
          }
          ul{
            padding: 0;
            margin: 0;
            display: flex;
            align-items: center;
            li{
              height:30px;
              width: 30px;
              border-radius: 50%;
              overflow: hidden;
            }
          }
        }
      }
    }
  }
</style>